<template>
  <div id="platform-bonus">
    <app-header></app-header>
    <div class="platform-bonus-box">
      <div class="baiwan-title">平台分红</div>
      <div class="bonus-box">
        <ol>
          <li>
            <label for="" v-if="platformProfitsdata">{{platformProfitsdata.totalDividend}} ETH</label>
            <span>累计分红金额</span>
          </li>
          <li>
            <label for="" v-if="platformProfitsdata">
              {{platformProfitsdata.dividendNumber}} 人</label>
            <span>累计分红人数</span>
          </li>
          <li>
            <label for="" v-if="platformProfitsdata">
              {{platformProfitsdata.perCapita}} ETH</label>
            <span>累计人均分红</span>
          </li>
        </ol>
        <ol>
          <li>
            <label for="" v-if="platformProfitsdata">{{platformProfitsdata.yesterdayAward}} ETH</label>
            <span>昨日开奖金额</span>
          </li>
          <li>
            <label for="" v-if="platformProfitsdata">
              {{platformProfitsdata.totalAward}} ETH</label>
            <span>累计开奖金额</span>
          </li>
          <li>
            <label for=""
                   v-if="platformProfitsdata">{{platformProfitsdata.turnOver}}</label>
            <span>ONEBET流通量</span>
          </li>
        </ol>
      </div>
      <div class="baiwan-title">分红榜单</div>
      <ul class="nav_tab">
        <li :class="oIndex===0?'active':''" @click="handleButton(0)">累计</li>
        <li :class="oIndex===1?'active':''" @click="handleButton(1)">近7日</li>
        <li :class="oIndex===2?'active':''" @click="handleButton(2)">昨日</li>
      </ul>
    </div>
    <div class="table-box">
      <div class="table-list">
        <ol class="table-header">
          <li>分红排名</li>
          <li>用户</li>
          <li>分红数量</li>
        </ol>
        <ul class="table-body" v-if="oIndex===0">
          <li v-if="totalData&&totalData.length>0" v-for="(list,index) in totalData" :key="index">
            <span :class="index<3?'active':''">{{zeroFill(index+1)}}</span>
            <span>{{list.userName}}</span>
            <span :title="list.amount+'ETH'">+{{list.amount}}</span>
          </li>
          <p class="no-data" v-if="!totalData||totalData.length<1">暂无数据</p>
        </ul>
        <ul class="table-body" v-if="oIndex===1">
          <li v-if="weekData&&weekData.length>0" v-for="(list,index) in weekData" :key="index">
            <span :class="index<3?'active':''">{{zeroFill(index+1)}}</span>
            <span>{{list.userName}}</span>
            <span :title="list.amount+'ETH'">+{{list.amount}}</span>
          </li>
          <p class="no-data" v-if="!weekData||weekData.length<1">暂无数据</p>
        </ul>
        <ul class="table-body" v-if="oIndex===2">
          <li v-if="yesterdayData&&yesterdayData.length>0" v-for="(list,index) in yesterdayData" :key="index">
            <span :class="index<3?'active':''">{{zeroFill(index+1)}}</span>
            <span>{{list.userName}}</span>
            <span :title="list.amount+'ETH'">+{{list.amount}}</span>
          </li>
          <p class="no-data" v-if="!yesterdayData||yesterdayData.length<1">暂无数据</p>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast, Pagination, List} from 'vant'
  import Header from '@/components/component/header.vue'
  import TableList from '@/components/component/table_list.vue'
  import Api from '@/axios'

  export default {
    name: 'platform-bonus',
    data() {
      return {
        loading: false, // 是否处于加载状态
        finished: false, // 是否已加载完所有数据
        oIndex: 0,
        platformProfitsdata: null,
        totalData: [],
        weekData: [],
        yesterdayData: []
      }
    },
    components: {
      'app-header': Header,
      'app-tableList': TableList
    },
    methods: {
      // 获取平台分红数据
      getplatformProfits() {
        Api.platformProfits().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.platformProfitsdata = result.data
          } else {
            Toast(result.message)
          }
        })
      },
      // 首页-分红榜
      getplatformList() {
        Api.platformList().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.totalData = result.data.total
            this.weekData = result.data.week
            this.yesterdayData = result.data.yesterday
          } else {
            Toast(result.message)
          }
        })
      },
      zeroFill(value) {
        if (value < 10) {
          return '0' + value
        } else {
          return value
        }
      },
      // 按钮点击事件
      handleButton(index) {
        this.oIndex = index
      }
    },
    mounted() {
      this.getplatformProfits()
      this.getplatformList()
    }
  }
</script>

<style lang="less" scoped>
  #platform-bonus {
    width: 100%;
    height: auto;
    padding-bottom: 68px;
    display: block;
    overflow: hidden;
    .platform-bonus-box {
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      padding: 0 24px;
      box-sizing: border-box;
      .bonus-box {
        width: 100%;
        height: 511px;
        overflow: hidden;
        background: #1E3054;
        padding: 60px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        > ol {
          width: 100%;
          height: 100%;
          &:first-child {
            border-right: 1px solid #F1D487;
            box-sizing: border-box;
          }
          > li {
            width: 100%;
            height: auto;
            display: block;
            overflow: hidden;
            margin-bottom: 50px;
            text-align: center;
            > label {
              width: 100%;
              height: auto;
              line-height: 50px;
              font-family: PingFangSC-Regular;
              font-size: 36px;
              color: #FFFFFF;
              text-align: center;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }
            > span {
              width: 100%;
              height: auto;
              line-height: 40px;
              font-family: PingFangSC-Regular;
              font-size: 28px;
              color: #9F9F9F;
              text-align: center;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }
          }
        }
      }
      .nav_tab {
        width: 100%;
        height: auto;
        display: flex;
        overflow: hidden;
        margin: 0px 0 16px 0;
        justify-content: center;
        li {
          width: 148px;
          height: 68px;
          background: #1E3054;
          border-radius: 10px;
          font-size: 24px;
          margin-right: 24px;
          color: #FFFFFF;
          line-height: 68px;
          text-align: center;
          overflow: hidden;
        }
        .active {
          background: #BD9852;
        }
      }
    }
    .table-box {
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      padding: 0 24px;
      box-sizing: border-box;
    }
  }

</style>
